<template>
  <a-modal
    :open="codeLogModal"
    :mask="false"
    title="运行日志"
    :footer="null"
    dialog-class="test"
    width="1000px"
    :body-style="{ height: '688px', padding: '16px' }"
    wrap-class-name="codeLog-modal"
    centered
    @cancel="close"
  >
    <!-- <div class="codeLog-content" v-html="logText"></div> -->
    <div class="codeLog-content">
      <div v-if="isLoading" class="res-body fc running h-100%">
        <a-spin tip="加载中..." />
      </div>
      <div v-else class="res-body">
        <pre>{{ taskResult }}</pre>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { nextTick, ref } from 'vue'

  import { k8sApi } from '@/services/api'

  const codeLogModal = ref<boolean>(false)

  const taskResult = ref('')
  const isLoading = ref(true)
  let controller: null | AbortController = null //实时日志的fetch取消令牌

  const getDataFn = async () => {
    try {
      const { data } = await k8sApi.log({ id: taskId.value, follow: true })

      if (!data.selectApiFlag) {
        taskResult.value = data.log
        isLoading.value = false
        return
      }
      onlineLog(data.url, data.accessToken)
    } catch (error) {
      console.log('error', error)
      isLoading.value = false
    }
  }

  // 打开运行日志弹窗
  const taskId = ref()
  const open = (data: any, cb: Function) => {
    codeLogModal.value = true
    taskId.value = data
    getDataFn()

    cb && cb()
  }

  const close = () => {
    codeLogModal.value = false
  }
  // 长链接获取打印日志
  const onlineLog = async (url: string, token: string) => {
    // 如果已经有请求了，则不再发起请求
    if (controller) return

    url = '/k8s' + url

    // 设置请求头
    const headers = {
      authorization: token,
      'Content-Type': 'text/plain' // 根据实际情况设置其他请求头
    }

    // 初始化取消令牌
    controller = new AbortController()
    const signal = controller.signal

    const response = await fetch(url, { headers, signal })
    isLoading.value = false

    if (!response.body) {
      console.error('ReadableStream not supported')
      return
    }
    // 获取 ReadableStream 对象
    const reader = response.body.getReader()
    const decoder = new TextDecoder()

    // 递归处理每个数据块
    async function read() {
      const { done, value } = await reader.read()
      console.log('value', value)
      console.log('done', done)

      if (done) {
        return
      }

      const text = decoder.decode(value)

      taskResult.value += text
      nextTick(() => {
        console.log('往下拉', document.querySelector('.res-body'))
        console.log('往下拉', document.querySelector('.codeLog-content'))

        document.querySelector('.codeLog-content')?.scrollTo(0, 9999999)
      })

      // 递归调用，处理下一个数据块
      read()
    }

    // 开始读取数据流
    read()
  }

  defineExpose({
    open,
    close
  })
</script>

<style lang="less">
  .codeLog-modal {
    .ant-modal-content {
      padding: 0;
    }

    .ant-modal-header {
      padding: 12px 16px;
      border-bottom: 1px solid @background3;
      margin: 0 !important;
    }

    .ant-modal-body {
      padding: 6px;
      margin: 0 !important;
    }

    .codeLog-content {
      overflow-y: auto;
      padding: 0 0 0 15px;
      width: 100%;
      height: 100%;
      text-align: left;
      white-space: pre-wrap;
      background-color: @background5;
      border: @border3;
      border: 1px solid rgba(196, 196, 199, 1);
      border-radius: 4px;
    }

    .test {
      width: 600px;
    }
  }

  .scroller {
    height: 100%;
    flex: auto 1 1;
  }

  .text {
    word-break: break-all;
  }

  .notice {
    padding: 24px;
    font-size: 20px;
    color: #999;
  }

  .message {
    display: flex;
    min-height: 24px;
    // padding: 12px;
    box-sizing: border-box;
  }

  .index,
  .text {
    flex: 1;
  }

  .res-body {
    overflow: auto;
    padding: 18px;
    flex: 1;
    flex-direction: column;

    pre {
      line-height: 1.5;
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      white-space: -pre-wrap;
      white-space: -o-pre-wrap;
      word-wrap: break-word;
    }
  }
</style>
